<template>
    <div class="mainNewNotice">
        <el-card class="cardNewNotice">
            <div>
                <div class="newNoticeHeading">公告</div> <!-- 设置公告标题样式 -->
                <textarea class="newNoticeText" placeholder="请输入公告内容" v-model="newMessageData.letter"></textarea>
            </div>
            <el-button class="addNoticeBtn" type="primary" plain @click="writeLetter">添加公告</el-button>
        </el-card>
        
    </div>
</template>

<script>
import axios, { AxiosError } from 'axios'
export default {
    name:   'NewNotice',
    data(){
        return {
            newMessageData:{
                letter:'',
                msgType:2,
                sender:'admin',
                recipient:'all users'
            }
        }
    },
    methods:{
        //使用结构赋值进行异常处理
        promise_error_process(promise){
            return promise.then(data=>[null,data])
                            .catch(err=>[err,null])
        },
        async writeLetterByAjax(){
            const response = await axios({
            url				      : 'http://127.0.0.1:8080/api/column/writeLetter',
            method			    : 'POST',
            withCredentials : true,
            headers			: {
                        'Content-Type'	: 'application/json'
                        },
            data : this.newMessageData    
            })
                return response
        },
        async writeLetter(){
            const [err,result] = await this.promise_error_process(this.writeLetterByAjax())
            if(err)
                console.log(err)
            else
                console.log(result)
        }
    }
}
</script>

<style scoped>
.mainNewNotice{
    display: flex; /* 使用Flexbox布局 */
    justify-content: center; /* 水平居中 */
    position: absolute; /* 设置 test 为绝对定位 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
.newNoticeHeading{
  text-align: center; /* 文本居中 */
  font-weight: bold; /* 文本加粗 */
  margin-bottom: 10px;
  font-size: 24px; /* 增大字体大小 */
}
.cardNewNotice{
  width: 75%;
  height: 60%;
  display: column;
}
.newNoticeText{
    width: 100%;
    height: 400px;
    font-size: 18px;
    border-color: #ccc;
    
}
.newNoticeText:focus{
    border-color: #6b6969;
}
.addNoticeBtn{
    margin-top: 20px;
    font-size: 20px;
}
</style>